/*// Application instance for showing user-feedback messages.
var App = new Ext.App({});

////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
// attaching listeners to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
    App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
    App.setAlert(true, action + ':' + res.message);
});

////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
    App.setAlert(false, "Something bad happend while executing " + action);
});*/

Ext.onReady(function(){
    Ext.QuickTips.init();

    // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
    successProperty: 'success',
    idProperty: 'title',
    root: 'Books',
    messageProperty: 'message'  // <-- New "messageProperty" meta-data
},      ['title',
                'summary',
                {name:'publishDate', type:'Date'},
                {name:'author', mapping:'author'},
                {name:'authorName', mapping:'author.name'}

        ]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
    encode: false   // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});

   var  store = new Ext.data.Store({
        root: 'Books',
        autoLoad:true,
        restful: true,
        reader: reader,
        writer: writer,

       proxy: new Ext.data.ScriptTagProxy({
           url: 'http://localhost:7481/bookstore/books.json',
           restful: true,
           method: 'POST'
        })
    });

   var columns = [{
        header: "Title",
        dataIndex: 'title',
        sortable:true,
        width: 100,
        editor: new Ext.form.TextField({})
      }, {
        header: "Summary",
        dataIndex: 'summary',
        width: 100,
        sortable:true,
        editor: new Ext.form.TextField({})
      },{
        header: "Author Name",
        dataIndex: 'authorName',
        width: 100,
        sortable:true,
        editor: new Ext.form.TextField({})
      }, {
        header: "PublishDate",
        dataIndex: 'publishDate',
        width: 250,
        sortable:true,
        editor: new Ext.form.TextField({})
      }];

        // use RowEditor for editing
    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    var grid = new Ext.grid.GridPanel({
        title: 'Books',
        width: 550,
        height: 400,
        plugins: [editor],
        columns:columns,
        renderTo:'book-grid',
        id:'books',
        iconCls: 'icon-grid',
        frame: true,
        autoScroll: true,
        store:store,
        tbar: [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: onAdd
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: onDelete
        }, '-'],
        viewConfig: {
            forceFit: true
        }
   });

     /**
     * onAdd
     */
    function onAdd(btn, ev) {
        var u = new grid.store.recordType({
            title : '',
            summary: '',
            authorName : '',
            publishDate : ''

        });
        editor.stopEditing();
        grid.store.insert(0, u);
        editor.startEditing(0);
    }
    /**
     * onDelete
     */
    function onDelete() {
        var rec = grid.getSelectionModel().getSelected();
        if (!rec) {
            return false;
        }
        grid.store.remove(rec);
    }

});